<template>
  <view>
    <view class="container">
      <nut-button style='margin-bottom: 10px' type="primary" size="large" @click="onClick('primary')">{{ text }}</nut-button>
      <nut-button style='margin-bottom: 10px' type="warning" size="large" @click="onClick('warning')">{{ textWarning }}</nut-button>
      <nut-button style='margin-bottom: 10px' type="danger" size="large" @click="onClick('danger')">icon</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">icon</nut-button>
      <nut-notify></nut-notify>
    </view>
</view>
</template>

<script lang="ts" setup>
const notify = useNotify();

const text = ref("你好👋");
const textWarning = ref("🐶👋");

function onClick(type: 'primary' | 'warning' | 'danger' | 'success') {
  notify[type]("欢迎使用 nutui-uniapp");
}
</script>

<style lang="scss" scoped>
.logoBox{
  display: flex;
  padding: 20rpx;
}
.top{
  height: 200rpx;
  width: 100%;
  background: $primary-color;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin: 200rpx auto 50rpx;
}
</style>
